<template>
    <div class="user">
        <div class="header">
            <div class="header-icon">
                <My size="50"></My>
            </div>
            <nut-button type='primary' className='header-userName' openType='getPhoneNumber' @getphonenumber="Longin">
                {{ userName }}
            </nut-button>
        </div>
        <div class="content">
          <div class="content-item" @click="GoIntegralList()">
            <div class="content-item-left">
              <div className="iconfont icon-jifen"></div>
              <p>积分：{{ integralSurplus ? integralSurplus : '0.00' }}</p>
            </div>
            <RectRight size="12" class="content-item-right"></RectRight>
          </div>
        </div>
        <div class="content">
            <div class="content-item" @click="GoOrder()">
                <div class="content-item-left">
                  <div className="iconfont icon-dingdan1"></div>
                  <p>我的订单</p>
                </div>
                <RectRight size="12" class="content-item-right"></RectRight>
            </div>
            <div class="content-item" @click="GoShoppingCart()">
                <div class="content-item-left">
                  <div className="iconfont icon-gouwuche"></div>
                  <p>购物车</p>
                </div>
                <RectRight size="12" class="content-item-right"></RectRight>
            </div>
            <div class="content-item" @click="GoIntegralMarket()">
                <div class="content-item-left">
                  <div className="iconfont icon-jifenshangcheng"></div>
                  <p>积分商场</p>
                </div>
                <RectRight size="12" class="content-item-right"></RectRight>
            </div>
            <div class="content-item" @click="GoSetting()">
              <div class="content-item-left"> 
                <Setting size="16"></Setting>
                <p>设置</p>
              </div>
              <RectRight size="12" class="content-item-right"></RectRight>
            </div>
            <div class="content-item" @click="OpenServicePopUp()">
                <div class="content-item-left">
                  <div className="iconfont icon-kefu"></div>
                  <p>联系客服</p>
                </div>
                <RectRight size="12" class="content-item-right"></RectRight>
            </div>
        </div>
        <nut-popup v-model:visible="servicePopUp">
            <div class="service-content">
                <Image :src="serviceQrcode"></Image>

            </div>
        </nut-popup>
    </div>
</template>

<script>
import { onMounted, reactive, toRefs, } from 'vue';
import './index.scss';
import { GetServiceQrCode, GetUserIntegral, ReqLogin } from '../utils/api.js';
import { My, Cart2, Order, Shop, RectRight, Setting, Message, } from '@nutui/icons-vue-taro';
import { Image } from '@tarojs/components';
import Taro from '@tarojs/taro';
import currency from 'currency.js'
export default {
    name: 'Index',
    components: {
        My, Cart2, Order, Shop, RectRight, Setting, Message, Image
    },
    setup() {
        const state = reactive({
            userName: Taro.getStorageSync('phoneNumber') != '' ? Taro.getStorageSync('phoneNumber').replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2") : '请登陆！',
            integralSurplus: '0.00', // 剩余积分
            servicePopUp: false,
            serviceQrcode: '',
            
        });
        onMounted(() => {
            GetServiceQrCode({}).then((res) => {
                if (res.code == 200) {
                    state.serviceQrcode = res.data.url
                }
            })
            GetUserIntegral({}).then((res) => {
                if (res.code == 200) {
                    state.integralSurplus = res.data.score;
                }
            })
        })
        // 登录
        const Longin = (e) => {
            // state.userName = '欢迎光临！！！'
            Taro.login({
                success: function (res) {
                    if (res.code) {
                        // 发起网络请求
                        ReqLogin({
                            code: res.code,
                            iv: encodeURIComponent(e.detail.iv),
                            encryptedData: encodeURIComponent(e.detail.encryptedData)
                        }).then((res) => {
                            Taro.setStorageSync('openId', res.data.openid);
                            Taro.setStorageSync('phoneNumber', res.data.phoneNumber);
                            state.userName = res.data.phoneNumber.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2");
                        })

                    } else {
                        Taro.showToast({
                            title: '登录失败！' + res.errMsg,
                            icon: 'none'
                        })
                    }
                }
            })
        }
        // 前往积分列表
        const GoIntegralList = () => {
          Taro.navigateTo({
                url: `/pages/integralList/index`
            })
        }
        // 前往订单
        const GoOrder = () => {
            console.log(11)
            Taro.navigateTo({
                url: `/pages/order-list/index`
            })
        };
        // 前往购物车
        const GoShoppingCart = () => {
            Taro.navigateTo({
                url: `/pages/shoppingCart/index`
            })
        };
        // 前往积分商城
        const GoIntegralMarket = () => {
            Taro.navigateTo({
                url: `/pages/integralMarket/index`
            })
        };
        // 前往设置
        const GoSetting = () => {
            Taro.navigateTo({
                url: `/pages/setting/index`
            })
        }
        // 打开客服二维码
        const OpenServicePopUp = () => {
            state.servicePopUp = true;
        };

        return {
            Longin,
            GoIntegralList,
            GoOrder,
            GoShoppingCart,
            GoSetting,
            OpenServicePopUp,
            GoIntegralMarket,
            ...toRefs(state),
        }
    }
}
</script>
  
  